
// 页面刷新发送dashboard请求
window.onload = async function () {
    try {
        const res = await axios({
            url: "/dashboard",
            method: "get",
        })

        console.log(res);

        // 解构
        const { year, salaryData, groupData, provinceData } = res.data

        // console.log(year);

        // 实现薪资，平均年龄，小组，班级人数
        for (const key in res.data.overview) {

            document.querySelector(`[name=${key}]`).innerHTML = res.data.overview[key]
        }


        // ---------------------薪资走势图--------
        function mySalary(year) {
            var myChart = echarts.init(document.querySelector('#line'));

            // 指定图表的配置项和数据
            var option = {
                // 标题部分的设置
                title: {
                    text: '2021全学科薪资走势'
                },
                // 图表
                grid: {
                    // 设置上下左右的间隙
                    top: '10%',
                    left: '10%',
                    right: '10%',
                    bottom: '10%'
                },
                // x轴的设置
                xAxis: {
                    type: 'category',
                    data: year.map(v => v.month),
                    // x轴线段设置
                    axisLine: {
                        // 线段的样式
                        lineStyle: {
                            // 类型 虚线
                            type: 'dashed',
                            // 颜色
                            color: '#d3d3d3'
                        }
                    },
                    // x轴文本设置
                    axisLabel: {
                        // 颜色
                        color: 'black'
                    }
                },
                // y轴的设置
                yAxis: {
                    type: 'value',
                    // 分割线
                    splitLine: {
                        // 线的样式
                        lineStyle: {
                            type: 'dashed', // 类型
                            // width:20, // 宽度
                            color: 'deepskyblue' // 颜色
                        }
                    }
                },
                color: ['#5f8eff'],
                // 提示框 设置了才会出现
                tooltip: {
                    show: true
                },
                series: [
                    {
                        data: year.map(v => v.salary),
                        type: 'line',
                        // 圆圈
                        smooth: true,
                        // 圆圈大小
                        symbolSize: 10,
                        // 线宽
                        lineStyle: {
                            width: 8
                        },
                        // 区域颜色
                        areaStyle: {
                            // 渐变
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#aed4ff' // 0% 处的颜色
                                    },
                                    {
                                        offset: .7,
                                        color: '#ffffff' // 100% 处的颜色
                                    }
                                ],
                                global: false // 缺省为 false
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        mySalary(year)


        // -------------薪资分布平均图---------------
        function avuSalary(salaryData) {
            var myChart = echarts.init(document.querySelector('#salary'));

            // 指定图表的配置项和数据
            var option = {
                //标题
                title: {
                    text: '班级新资分布'
                },
                tooltip: {
                    trigger: 'item'
                },
                // 控制小标题的上下
                legend: {
                    bottom: '5%',
                    left: 'center'
                },
                color: ['#fda31f', '#4f98ff', '#3dcfff', '#31d49b'],
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        // 内圆和外园的半径
                        radius: ['60%', '80%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        // 数据
                        data:
                            salaryData.map(v => {
                                return {
                                    value: v.b_count + v.g_count,
                                    name: v.label
                                }
                            })

                        /*    [
                           { value: 155, name: 'Direct' },
                           { value: 580, name: 'Email' },
                           { value: 484, name: 'Union Ads' },
                           { value: 300, name: 'Video Ads' }
                           ] */
                    }
                ]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        avuSalary(salaryData)


        // ------------每组平均薪资分布图-------------
        function grounpSalary(groupData) {
            var myChart = echarts.init(document.querySelector('#lines'));

            // 指定图表的配置项和数据
            var option = {
                xAxis: {
                    type: 'category',
                    data: groupData[1].map(v => v.name),
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#ced0d3'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    // 设置y轴的虚线，分割线
                    splitLine: {
                        lineStyle: {
                            type: "dashed"
                        }
                    }
                },

                // 给条加颜色
                color: [
                    {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#34d59d' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#d5f6eb' // 100% 处的颜色
                            }
                        ],
                        global: false // 缺省为 false
                    },
                    {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#48a0ef' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#d9ebfb' // 100% 处的颜色
                            }
                        ],
                        global: false // 缺省为 false
                    }
                ],
                series: [
                    {
                        data: groupData[1].map(v =>
                            v.hope_salary
                        ),
                        type: 'bar'
                    },
                    // 添加第二条的方法
                    {
                        data: groupData[1].map(v =>
                            v.salary
                        ),
                        type: 'bar'
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            // 实现排他思想
            const btns = document.querySelectorAll('#btns .btn')
            btns.forEach(btn => {
                btn.onclick = function () {
                    document.querySelector('.btn-blue').classList.remove('btn-blue');
                    this.classList.add('btn-blue');
                    // 获取当前点击的内容
                    console.log(this.innerHTML);
                    const index = this.innerHTML
                    console.log(groupData);

                    option.xAxis.data = groupData[index].map(v => v.name)
                    option.series[0].data = groupData[index].map(v => v.hope_salary)
                    option.series[1].data = groupData[index].map(v => v.salary)
                    myChart.setOption(option);
                }

            });
        }
        grounpSalary(groupData)



        // -------------薪资分布平均图---------------
        function boyGirSalary(salaryData) {
            var myChart = echarts.init(document.querySelector('#gender'));

            // 指定图表的配置项和数据
            var option = {
                title: [
                    {
                        text: '男生女生薪资分布'
                    },
                    {
                        text: '女生',
                        left: 'center',
                        bottom: '10%'
                    },
                    {
                        text: '男生',
                        left: 'center',
                        top: '45%',
                    },
                ],
                color: ['#ffa426', '#5298ff', '#3bbbfc', '#36d69c'],
                series: [
                    // 第一个园
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40', '50'],
                        center: ['50%', '30%'],
                        data:
                            salaryData.map(v => {
                                return {
                                    value: v.b_count,
                                    name: v.label
                                }
                            })

                        ,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },

                    // 第二给圆
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40', '50'],
                        center: ['50%', '70%'],
                        data: salaryData.map(v => {
                            return {
                                value: v.g_count,
                                name: v.label
                            }
                        }),
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        boyGirSalary(salaryData)

        // --------------地图--------------------
        const initMapChart = (provinceData) => {
            const myEchart = echarts.init(document.querySelector('#map'))
            const dataList = [
                { name: '南海诸岛', value: 0 },
                { name: '北京', value: 0 },
                { name: '天津', value: 0 },
                { name: '上海', value: 0 },
                { name: '重庆', value: 0 },
                { name: '河北', value: 0 },
                { name: '河南', value: 0 },
                { name: '云南', value: 0 },
                { name: '辽宁', value: 0 },
                { name: '黑龙江', value: 0 },
                { name: '湖南', value: 0 },
                { name: '安徽', value: 0 },
                { name: '山东', value: 0 },
                { name: '新疆', value: 0 },
                { name: '江苏', value: 0 },
                { name: '浙江', value: 0 },
                { name: '江西', value: 0 },
                { name: '湖北', value: 0 },
                { name: '广西', value: 0 },
                { name: '甘肃', value: 0 },
                { name: '山西', value: 0 },
                { name: '内蒙古', value: 0 },
                { name: '陕西', value: 0 },
                { name: '吉林', value: 0 },
                { name: '福建', value: 0 },
                { name: '贵州', value: 0 },
                { name: '广东', value: 0 },
                { name: '青海', value: 0 },
                { name: '西藏', value: 0 },
                { name: '四川', value: 0 },
                { name: '宁夏', value: 0 },
                { name: '海南', value: 0 },
                { name: '台湾', value: 0 },
                { name: '香港', value: 0 },
                { name: '澳门', value: 0 },
            ]

            // ---------给datalist中的value赋值
            // -----需要用到数组的新方法，find,find的是返回第一个符合判断的值
            dataList.forEach(el => {
                const a = provinceData.find(v => {
                    // 判断返回的数据中有这个数据就return出去
                    return v.name.indexOf(el.name) != -1;
                })

                if (a) {
                    // console.log(a.value);
                    el.value = a.value
                }

            });

            let option = {
                title: {
                    text: '籍贯分布',
                    top: 10,
                    left: 10,
                    textStyle: {
                        fontSize: 16,
                    },
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} 位学员',
                    borderColor: 'transparent',
                    backgroundColor: 'rgba(0,0,0,0.5)',
                    textStyle: {
                        color: '#fff',
                    },
                },
                visualMap: {
                    min: 0,
                    max: 6,
                    left: 'left',
                    bottom: '20',
                    text: ['6', '0'],
                    inRange: {
                        color: ['#ffffff', '#0075F0'],
                    },
                    show: true,
                    left: 40,
                },
                geo: {
                    map: 'china',
                    roam: false,
                    zoom: 1.0,
                    label: {
                        normal: {
                            show: true,
                            fontSize: '10',
                            color: 'rgba(0,0,0,0.7)',
                        },
                    },
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(0, 0, 0, 0.2)',
                            color: '#e0ffff',
                        },
                        emphasis: {
                            areaColor: '#34D39A',
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            borderWidth: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                        },
                    },
                },
                series: [
                    {
                        name: '籍贯分布',
                        type: 'map',
                        geoIndex: 0,
                        data: dataList,
                    },
                ],
            }
            myEchart.setOption(option)
        }

        initMapChart(provinceData)
    } catch (error) {
    }
} 